<template>
  <div>
    <InsertUncommonWordDialog
      ref="insertUncommonWordDialog"
      :uncommonWordList="UncommonWordList"
      @saveUncommonWord="selectUncommonWordList"/>
    <el-row height="40px">
      <el-col :span="4">
        <el-button v-if="!isShow" icon="el-icon-plus" size="small" type="primary" @click="insertUncommonWord">新增生僻字
        </el-button>
      </el-col>
      <el-col :span="10" :offset="10">
        <el-input size="small" placeholder="请输入拼音或形似字搜索" v-model="searchInput"/>
      </el-col>
    </el-row>
    <el-table highlight-current-row border :height="tableHeight"
              :data="filteredGridData.slice((currentPage-1)*pageSize,currentPage*pageSize)">
      <el-table-column property="content" label="生僻字" width="150">
        <template slot-scope="scope">
          <img :src="scope.row.content" style="width: 25px"/>
        </template>
      </el-table-column>
      <el-table-column property="spellCode" label="读音" width="150"></el-table-column>
      <el-table-column property="similarWord" label="形似字"></el-table-column>
      <el-table-column property="code" label="编码"></el-table-column>
      <el-table-column property="remark" label="备注"></el-table-column>
      <el-table-column v-if="!isShow" label="操作">
        <template slot-scope="scope">
          <span><el-link @click.prevent="updateUncommonWord(scope.row)">编辑</el-link></span>
          <span><el-link type="danger" @click.prevent="deleteUncommonWordById(scope.row.id)">删除</el-link></span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top: 10px; text-align: right; "
                   background small
                   :current-page.sync="currentPage"
                   :page-size='pageSize'
                   :total="filteredGridData.length"
                   layout="total, prev, pager, next, jumper">
    </el-pagination>
  </div>
</template>

<script>
import InsertUncommonWordDialog from "./InsertUncommonWordDialog";

export default {
  name: "UncommonWordIndex",
  components: {InsertUncommonWordDialog},
  data() {
    return {
      UncommonWordList: [],
      tableHeight: 0,
      searchInput: '',
      currentPage: 1,
      pageSize: 10,
      isShow: false
    }
  },
  computed: {
    filteredGridData() {
      // 计算属性必须有返回值
      var filteredGridData = []
      if (this.searchInput) {
        this.UncommonWordList.forEach((item) => {
          if (item.spellCode.includes(this.searchInput) || item.similarWord.includes(this.searchInput)) {
            filteredGridData.push(item)
          }
        })
        return filteredGridData;
      } else {
        return this.UncommonWordList;
      }
    },
  },
  methods: {
    insertUncommonWord() {
      this.$refs.insertUncommonWordDialog.type = 'insert'
      this.$refs.insertUncommonWordDialog.visible = true
    },
    updateUncommonWord(row) {
      this.$refs.insertUncommonWordDialog.type = 'update'
      this.$refs.insertUncommonWordDialog.visible = true
      this.$refs.insertUncommonWordDialog.uncommonWord = JSON.parse(JSON.stringify(row))
    },
    deleteUncommonWordById(id) {
      this.$confirm('确认删除生僻字?', '确认', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let param = new URLSearchParams()
        param.append("id", id)
        this.axios.post(CONST.SERVICE_REST_PACKAGE + 'UncommonWordCtrl/deleteUncommonWordById', param).then(() => {
          this.selectUncommonWordList()
        })
      })
    },
    selectUncommonWordList() {
      this.axios.get(CONST.SERVICE_REST_PACKAGE + 'UncommonWordCtrl/selectAll')
        .then((response) => {
          this.UncommonWordList = response.data;
        })
    },
  },
  created() {
    this.tableHeight = CONST.WORKSPACE_HEIGHT - 80
    this.selectUncommonWordList()
    if (this.$store.state.user.userName === 'admin') {
      return
    }
    //角色Id等于管理员角色
    for (let i = 0; i < this.$store.state.user.roleIds.length; i++) {
      if (this.$store.state.user.roleIds[i] === '1455781731549327361') {
        return;
      }
    }
    UTIL.findTreeNode(this.$store.state.menuList, item => {
      if (item.id === this.$store.state.activeId) {
        if (item.detailButton && item.editButton) {
          this.isShow = false
        }else {
          if (item.detailButton) {
            this.isShow = true
          }
        }
      }
    })
  }
}
</script>

<style scoped>

</style>
